<template>
  <div class="chat-container" v-loading="loading">
    <el-card>
      <el-scrollbar wrap-class="scrollable" view-class="view">
        <ul class="message-list">
          <li v-for="(message, index) in messages" :key="index" :class="{'me': message.isMe}">
            {{ message.text }}
          </li>
        </ul>
      </el-scrollbar>
<div>
      <el-input
        placeholder="Type a message"
        v-model="newMessage"
        style="width: 90%;margin-right: 10px;"

      ></el-input>
      <el-button type="primary" @click="sendMessage">确定</el-button>
    </div>
    </el-card>
  </div>
</template>

<script>
import service from '@/request';

export default {
  data() {
    return {
      loading:false,
      newMessage: '',
      messages: [
        { text: '现在可以向我提问题了', isMe: false },
       
      ]
    };
  },
  mounted(){

  },
  methods: {
   async sendMessage() {
    this.loading=true;  
    this.messages.push({ text: this.newMessage, isMe: true });
        
        const res=await service.get("/hello/ai",{
          params:{
            question:this.newMessage
          }
        });
        if(res.code == 200){
          this.loading=false
          this.newMessage=""
          this.messages.push({ text: res.data, isMe: false });

        }

      
    }
  }
}
</script>

<style scoped>
.chat-container {
  width: 80%;
  margin: auto;
}

.message-list {
  list-style-type: none;
  padding: 0;
}

.message-list li {
  padding: 10px;
  border-radius: 5px;
  margin: 5px 0;
}

.message-list .me {
  background-color: #d9edf7;
  text-align: right;
}

.scrollable {
  height: 400px;
}
</style>